<template>
  <div class="p-2">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>代理商：{{ form.name }}</span>
        </div>
      </template>
      <el-collapse v-model="activeName" class="border_top_0">
        <el-collapse-item title="基础信息" name="1">
          <div class="row">
            <div class="col">
              <div class="label">
                代理商名称：
              </div>
              <div class="value"> {{ form.name||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                代理商类型：
              </div>
              <div class="value">
                <dict-tag
                  :options="agent_type"
                  :value="form.dwType"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                代理商级别：
              </div>
              <div class="value">
                <dict-tag
                  :options="agent_level"
                  :value="form.dwLevel"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                统一社会信用代码：：
              </div>
              <div class="value"> {{ form.nsrSbh||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                法人姓名：
              </div>
              <div class="value"> {{ form.fr||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证号：
              </div>
              <div class="value"> {{ form.frSfz||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                法人手机号：
              </div>
              <div class="value"> {{ form.frSjh||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                经办人手机号：
              </div>
              <div class="value"> {{ form.wtrSjh||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                经办人邮箱：
              </div>
              <div class="value"> {{ form.wtrEmail||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                区域：
              </div>
              <div class="value"> {{ form.unitAreaName||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                实际经营地址：
              </div>
              <div class="value"> {{ form.address||'' }} </div>
            </div>

          </div>
        </el-collapse-item>
        <el-collapse-item title="账户信息" name="2">
          <div class="row">
            <div class="col">
              <div class="label">
                开户名：
              </div>
              <div class="value"> {{ form.khm||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                开户银行：
              </div>
              <div class="value">
                <dict-tag
                  :options="bank_list"
                  :value="form.khh"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                开户支行：
              </div>
              <div class="value"> {{ form.khd||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联行号：
              </div>
              <div class="value"> {{ form.khhNo||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                开户账号：
              </div>
              <div class="value"> {{ form.bankCard||'' }} </div>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="相关资质" name="3">
          <div class="row">
            <div
              class="col"
              v-if="form.dwType==1"
            >
              <div class="label">
                开户许可证：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.khxkz"
                  :preview-src-list="[form.khxkz]"
                />
              </div>
            </div>
            <div
              class="col"
              v-if="form.dwType==1"
            >
              <div class="label">
                营业执照：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.yyzz"
                  :preview-src-list="[form.yyzz]"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证正面：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.frSfzzm"
                  :preview-src-list="[form.frSfzzm]"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证反面：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.frSfzfm"
                  :preview-src-list="[form.frSfzfm]"
                />
              </div>
            </div>
            <div
              class="col"
              v-if="form.dwType==2"
            >
              <div class="label">
                银行卡正面：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.bankZm"
                  :preview-src-list="[form.bankZm]"
                />
              </div>
            </div>
          </div>
        </el-collapse-item>

      </el-collapse>
    </el-card>
  </div>
</template>

<script setup name="agentDetail" lang="ts">
import api from '@/api/agent/addAgent';
import { addOrEditForm } from '@/api/agent/addAgent/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { agent_level, agent_type, bank_list } = toRefs<any>(proxy?.useDict('agent_type', 'agent_level', 'bank_list'));

const activeName = ref<Array<string|number>>(['1','2','3'])

const form = ref<addOrEditForm>({
  address: '',
  bankCard: '',
  bankZm: '',
  dwLevel: '',
  dwType: '',
  fr: '',
  frSfz: '',
  frSfzfm: '',
  frSfzzm: '',
  frSjh: '',
  khd: '',
  khh: '',
  khhNo: '',
  khm: '',
  khxkz: '',
  name: '',
  nsrSbh: '',
  unitArea: '',
  unitAreaName: '',
  wtr: '',
  wtrEmail: '',
  wtrSjh: '',
  yyzz: ''
});

const route = useRoute();
/** 查询企业信息 */
const getInfoData = async () => {
  const res = await api.channelDetail(merchantId.value);
  form.value = res.data;
};

const merchantId = ref<any>('');
onMounted(() => {
  if (route.query.id) {
    merchantId.value = route.query.id;
    getInfoData(); // 查询企业信息
  }
});
</script>

<style lang="scss" scoped>
</style>
